<template>
  <div class="supplier-view" ref="supplierView"> </div>
</template>
<script>
  import { selectDictLabel, echarts, omit } from '@package/utils'
  import { apiGetSupplierTypeCount } from '../api/index.js'

  export default {
    name: 'SupplierView',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      dictOptions: {
        handler(val) {
          // if (this.dictOptions['srm_supplier_info.supplier_state']) {
          this.initSupplierData()
          // }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      // this.initSupplierData()
    },
    methods: {
      selectDictLabel,
      initSupplierData() {
        apiGetSupplierTypeCount().then(({ data }) => {
          const lengendList = data.map((v) => {
            return {
              value: v.quantity,
              name: v.supplierStateName,
              color: v.supplierState === 1 ? '#FF993C' : v.supplierState === 2 ? '#4474F6' : '#0BBD5D'
            }
          })
          this.initEcharts(lengendList)
        })
      },
      initEcharts(lengendList) {
        const names = lengendList.map((v) => {
          return v.name
        })
        const dataList = lengendList.map((v) => {
          return {
            ...omit(v, 'color'),
            itemStyle: { color: v.color }
          }
        })
        const chartDom = this.$refs.supplierView
        this.chart = echarts.init(chartDom)
        const option = {
          title: {
            // text: 'Funnel'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
          },
          toolbox: {
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            },
            show: false
          },
          legend: {
            data: names,
            show: false
          },
          series: [
            {
              // name: 'Funnel',
              type: 'funnel',
              left: 'center',
              top: 10,
              bottom: 25,
              width: '80%',
              min: 0,
              minSize: '20%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: dataList,
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
                normal: {
                  label: {
                    show: true,
                    formatter: '{b}:{c}',
                    position: 'inner'
                  }
                }
              }
            }
          ]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>
